import React, { useState } from 'react'
import Test from './Test'
export default function App() {
  console.log('app更新了')
  // useState的作用: 在函数组件中定义状态
  // useState的参数: 就一个参数,是状态的初始值
  // useState的返回值: 是一个数组,数组中有两个元素,第一个元素就是状态值,第二个元素是修改状态的方法
  const [c, setC] = useState(1)
  const [msg, setMsg] = useState('hello')
  // useState相关注意问题:
  // 1. 组件中有几个状态,就调用几次useState
  // 2. useState内部已经实现了优化性能的问题.自动判断组件中的状态是否发生变化,如果变化了才更新组件,如果没有变化就不会再频繁的更新组件了
  // 解答疑惑?
  // 1. 函数组件更新,看起来是给常量重新赋值,为什么没有报错?
  // 答案: 每一次函数组件更新.是重新创建了新的常量.没有重新赋值这个情况发生
  // 2. 函数组件更新,看起来useState重新调用了,为什么状态的值不是初始值?
  // 答案: useState内部会自动判断useState是第几次调用.第一次调用初始值赋值给状态.后面调用不会将初始值赋值给状态了,而是将修改后的新的值赋值给状态

  // setXxx的两种传参方式:
  // 1. setXXX(目标值)
  // 2. setXXX(回调函数) 回调函数是在上一次数据修改完毕之后触发,可以接收到修改后的值

  return (
    <div>
      App,
      <p>{c}</p>
      <p>{msg}</p>
      <button
        onClick={function () {
          // setC(1)
          // setC(2)
          // setC(3)
          // setMsg('hello hook')
          // setC((newC) => {
          //   return newC + 1
          // })
          // setC((newC) => {
          //   return newC + 2
          // })
          // setC((newC) => {
          //   return newC + 3
          // })
          setC(c + 1) // setXXX也是异步的
          console.log(c) //1
        }}
      >
        +
      </button>
      <hr />
      {/* <Test></Test> */}
    </div>
  )
}
